<template>
  <div class="data_left07" style="width: 29%;">
    <div class="dataAllNo02">
      <div class="dataAllBorder01">
        <div class="data_tit3">
          <el-tooltip placement="top-start">
            <template #content>
              统计规则：<br />男性退休年龄为60岁<br />女性退休年龄为：<br />&nbsp;&nbsp;①职务级别‘县处级’以下的55退休<br />&nbsp;&nbsp;②职务级别‘县处级’以上的包括县处级60退休<br />（其中人员状态为在编或者在编不在岗）
            </template>
            <span>五年内离退休人数预测</span>
          </el-tooltip>
        </div>
        <div
          id="bzzyretirepie"
          style="width: 100%; height: calc(100% - 50px); float: left"
        ></div>
      </div>
    </div>
  </div>

</template>
<script>
import Sever from "@/api/selfApi";
var myChart;
export default {
  name: "Fivelt",
  props: ["selectCode"],
  setup() {},
  data() {
    return {
      option: {
        legend: {
          right: "5%",
          top: 2,
          textStyle: {
            fontSize: 12, //字体大小
            color: "#A5E7FF",
          },
          data: ["男", "女"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "18%",
          left: "5%",
          right: "5%",
          bottom: "12%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              fontSize: 14,
              color: "#A5E7FF",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          },
          {
            data: [],
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "男",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#FCED73",
                shadowColor: "rgba(0, 0, 0, .1)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#FCED73",
              },
            },
            itemStyle: {
              color: "#FCED73",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(252,237,115,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(252,237,115,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(252,237,115, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [],
          },
          {
            name: "女",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#00FF7F",
                shadowColor: "rgba(0, 0, 0, .1)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#00FF7F",
              },
            },
            itemStyle: {
              color: "#00FF7F",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(252,237,115,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(252,237,115,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(252,237,115, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
	  saveImageToBackend() {
	        // 将 echarts 图表转换为图片
	        const base64Data = myChart.getDataURL({
	          pixelRatio: 2,
	        });
	        
	        // 构建请求体数据
	        const requestData = {
	          image: base64Data,
	          depCode:this.selectCode,
			  name:this.selectCode+"6"+".png"
	        };
	  			
	  		
	        
	        Sever.smz
	            .getSaveImage(requestData)
	            .then((res) => {
	             
	            })
	            .catch((err) => {
	              console.log(err);
	            });
	        
	      },
    initEcharts() {
      myChart.hideLoading();
      this.option && myChart.setOption(this.option);
      // 重置option属性
      this.option = this.$options.data.call(this).option;
      // 响应式变化
      window.addEventListener("resize", () => myChart.resize(), false);
    },
    async refreshData() {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("bzzyretirepie"));

      myChart.clear();
      myChart.showLoading("default", {
        text: "正在加载，请稍候...",
        color: "#c23531",
        textColor: "rgba(255, 255, 255, 0.5)",
        maskColor: "#00000000",
        zlevel: 0,
      });

      await Sever.smz
        .getFivelt({ depCode: this.selectCode })
        .then((res) => {
          if (res.code == 1) {
            if (res.data != null) {
              let dateTime = new Date().getFullYear();
              const ltxarr1 = [],
                ltxarr2 = [],
                yeararr = [];
              ltxarr1.push(res.data[0].oneyear);
              ltxarr2.push(res.data[1].oneyear);
              yeararr.push(
                new Date(new Date().setFullYear(dateTime + 1)).getFullYear() +
                  ""
              );
              ltxarr1.push(res.data[0].twoyear);
              ltxarr2.push(res.data[1].twoyear);
              yeararr.push(
                new Date(new Date().setFullYear(dateTime + 2)).getFullYear() +
                  ""
              );
              ltxarr1.push(res.data[0].threeyear);
              ltxarr2.push(res.data[1].threeyear);

              yeararr.push(
                new Date(new Date().setFullYear(dateTime + 3)).getFullYear() +
                  ""
              );
              ltxarr1.push(res.data[0].fouryear);
              ltxarr2.push(res.data[1].fouryear);

              yeararr.push(
                new Date(new Date().setFullYear(dateTime + 4)).getFullYear() +
                  ""
              );
              ltxarr1.push(res.data[0].fiveyear);
              ltxarr2.push(res.data[1].fiveyear);

              yeararr.push(
                new Date(new Date().setFullYear(dateTime + 5)).getFullYear() +
                  ""
              );
              this.option.xAxis[0].data = yeararr;
              this.option.series[0].data = ltxarr1;
              this.option.series[1].data = ltxarr2;
            } else {
              this.option.xAxis[0].data = [];
              this.option.series[0].data = [];
              this.option.series[1].data = [];
            }
            this.initEcharts();
          } else {
            console.log("retirepie接口出错！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.refreshData();
  },

  watch: {
    selectCode(newV) {
      this.refreshData();
    },
  },
};
</script>